import React from 'react';
import { Row, Col, Progress } from 'antd';
import styles from './index.less'

class ClassificationProgress extends React.Component {

  constructor(props) {
    super(props)
  }

  render() {
    const list = this.props.list || [];
    return (
      <Row gutter={24} className={styles.progressContainer}>
        {list.map((item, index) => (
          <Col span={8} key={index} className={styles.item}>
            <Progress percent={item.proportion} trailColor={index % 3 == 0 ? 'rgb(226, 237, 253)' : (index % 3 == 1 ? 'rgb(224, 249, 242)' : 'rgb(255, 244, 219)')}
              strokeColor={index % 3 == 0 ? 'rgb(61, 145, 249)' : (index % 3 == 1 ? 'rgb(0, 224, 175)' : 'rgb(255, 186, 3)')}
              showInfo={false} ></Progress>
            <div className={styles.info}>
              <div className='ellipsis' style={{width: '70%'}}>{item.classifyName}</div>
              <div>{item.numberOfItem}本 / {item.proportion}%</div>
            </div>
          </Col>
        ))}
      </Row>
    )
  }
}

export default ClassificationProgress
